<template>
  <div class="api-layout">
    <p class="api-layout-title">API</p>
    <p class="api-layout-title2">props</p>
    <table>
      <tr>
        <th>属性</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      <tr v-for="(value, key) in propData" :key="key">
        <td>{{ humpToLine(key) }}</td>
        <td>
            <span>{{ value["explanation"] }}</span>
            <template v-if="value['options']">
            ,可选值为
                <span v-for="(option,index) of value['options']">
                    <span v-if="index!==0">,</span>
                    <span class="tag">{{option}}</span>
                </span>
            或者不设置
            </template>
        </td>
        <td>{{ value["valueType"] }}</td>
        <td>{{ value["default"] }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue";
import { humpToLine } from '@/utils/global'
const { propData } = defineProps({
  propData: {
    type: Object,
    required: true,
  },
});
</script>
<style lang="scss" scoped>
.api-layout {
  .api-layout-title {
    font-size: 30px;
    font-weight: bold;
    line-height: 2;
  }
  .api-layout-title2{
    font-size: 20px;
    font-weight: bold;
    line-height: 3;
  }
  table {
    font-family: Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
    border: 1px solid #e9e9e9;
    width: 100%;
    margin-bottom: 24px;
    line-height: 1.5;
    color: rgb(81, 90, 110);
    background-color: rgb(255, 255, 255);
    th {
      background: #f7f7f7;
      white-space: nowrap;
      color: #5c6b77;
      font-weight: 600;
      
    }
    td,th{
        border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: left;
    }
    .tag{
        padding: 0.2em 0.4em;
        font-size: 85%;
        background-color: rgb(255, 245, 245);
        border-radius: 3px;
        font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
        color: rgb(250, 121, 94);
    }
  }
}
</style>
